<template>
  <div class="menu">
    <div class="treeBox bgWhite scroBox baseBoderShadow baseBorderRadius">
      <el-scrollbar>
        <el-tree
          ref="tree"
          :data="data_tree"
          node-key="id"
          :default-expanded-keys="keysArr"
          :current-node-key="currentNodekey"
          :highlight-current='true'
          @node-click="nodeClick"
          :props="defaultProps"
        >
        </el-tree>
      </el-scrollbar>
    </div>
    <div
      class="contentRight"
      style="padding-right:30px"
    >
      <div class="groupBtn">
        <el-select
          v-model="appKey"
          style="width: 140px;"
          @change="appKeyChangeFunc"
        >
          <el-option
            v-for="(item, index) in appKeyList"
            :key="index"
            :value="item.value"
            :label="item.title"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          @click="firstMenuBtn"
        >添加一级菜单</el-button>
        <el-button
          type="primary"
          class="btnBlue"
          @click="addBtn"
        >添加菜单</el-button>
        <el-button
          type="warning"
          @click="editBtn"
        >编辑菜单</el-button>
        <el-button
          type="primary"
          class="btnCyan"
          @click="deleteTip"
        >删除菜单</el-button>
      </div>
      <div
        class="bgWhite baseBoderShadow baseBorderRadius"
        style="text-align: center; padding: 70px 0;min-height: 690px;"
      >
        <div
          class="content"
          style="display: inline-block;"
        >
          <ul style="text-align: left;">
            <li>
              <span>菜单ID:</span>
              <span>{{currentMenu.id||'-'}}</span>
            </li>
            <li>
              <span>菜单名称:</span>
              <span>{{currentMenu.name||'-'}}</span>
            </li>
            <li>
              <span>菜单URL:</span>
              <span>{{currentMenu.url||'-'}}</span>
            </li>
            <li>
              <span>菜单路径:</span>
              <span>{{currentMenu.route||'-'}}</span>
            </li>
            <li>
              <span>菜单图标:</span>
              <span>
                <template v-if="currentMenu.icon">
                  <svg-icon :iconClass="currentMenu.icon"></svg-icon>
                </template>
              </span>
            </li>
            <li>
              <span>菜单排序:</span>
              <span>{{currentMenu.order_seq||'-'}}</span>
            </li>
            <li>
              <span>菜单按钮权限:</span>
              <span>
                <el-button @click="btnClick">按钮权限</el-button>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="showTitle"
      width="500px"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
        >
          <el-form-item label="菜单名称">
            <el-input
              v-model.trim="form.name"
              clearable
            />
          </el-form-item>
          <el-form-item label="菜单URL">
            <el-input
              v-model.trim="form.url"
              type="url"
              clearable
            />
          </el-form-item>
          <el-form-item label="菜单路径">
            <el-input
              v-model.trim="form.route"
              clearable
            />
          </el-form-item>
          <el-form-item label="菜单图标">
           <!-- <el-input
             v-model.trim="form.icon"
             clearable
             style="width: 200px;"
           /> -->
           <template v-if="form.icon">
             <svg-icon :iconClass="form.icon"></svg-icon>
             <el-button @click="delIcon">删除</el-button>
           </template>
            <!-- <span style="display: inline-block;width: 20px;height: 20px;vertical-align: top;"> -->
              <!-- <div v-if="svgData.id" v-html="svgData.svgStr" style="width:1em;height: 1em;"></div> -->
              <!-- <div v-if="svgData.id" style="width:1em;height: 1em;">
                <svg-icon :iconClass="svgData.name"></svg-icon>
              </div>
            </span> -->

            <el-button @click="selectIconClick">选择图标</el-button>
          </el-form-item>
          <el-form-item label="菜单排序">
            <el-input
              v-model.trim="form.order_seq"
              type="number"
              clearable
            />
          </el-form-item>
        </el-form>
        <div style="padding-left:80px">
          <el-button
            v-if="isSdd==1"
            type="primary"
            @click="firstMenu"
          >确定</el-button>
          <el-button
            v-if="isSdd==2"
            type="primary"
            @click="add"
          >确定</el-button>
          <el-button
            v-if="isSdd==3"
            type="primary"
            @click="edit"
          >确定</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-drawer
      title="按钮管理"
      :visible.sync="drawer"
      :direction="direction"
      size="500px"
    >
      <BtnPermission
        :id="currentMenu.id"
        :appKey="appKey"
        v-if="drawer"
      ></BtnPermission>
    </el-drawer>
    <el-dialog
      width="800px"
      title="选择图标"
      :visible.sync="dialogVisible_icon"
    >
      <div>
        <el-row>
          <template v-for="(item, index) in iconList">
            <el-col :span="3" :key="index">
              <el-button @click="checkIcon(item)">
                <svg-icon :iconClass="item.name"></svg-icon>
              </el-button>
            </el-col>

          </template>
        </el-row>

      </div>
    </el-dialog>
  </div>

</template>
<script>
import BtnPermission from "./btn-permission.vue";
import { getDictByBzdm } from "@/api/common.js";
import { findIconList, findIcon } from "@/api/common-api.js";
export default {
  name: 'cdgl',
  components: {
    BtnPermission
  },
  data() {
    return {
        svgData: {
            id: '',
            svgStr: ''
        },
        dialogVisible_icon: false,
        iconList: [], // 图标列表
      drawer: false,
      direction: "rtl",
      data_tree: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      currentMenu: {},
      keysArr: [],
      currentNodekey: "",
      form: {
        name: "",
        url: "",
        route: "",
        icon: "",
        order_seq: 0
      },
      dialogVisible: false,
      showTitle: "",
      isSdd: 0,
      appKey: "", // 所选中的业务系统
      appKeyList: [] // appKey列表，区分不同的业务系统
    };
  },
  watch: {},
  mounted() {
    // this.getAppKeyList();
    // this.treeData();
      this.findIconList();
    Promise.all([this.getAppKeyList()]).then(() => {
      this.treeData();
    });
  },
  methods: {
    /**
     * @name delIcon
     * @description 删除图表
     * @author cjs1992
     * @date 2020-07-03 08:41:21
     */
    delIcon () {
      this.$set(this.form, 'icon', false);
    },
      checkIcon (data) {
          this.svgData = data;
          this.$set(this.form, 'icon', data.name);
          this.dialogVisible_icon = false;
      },
      selectIconClick () {
          this.dialogVisible_icon = true;
      },
      async findIconList () {
          const res = await findIconList();
          this.iconList = res.data || [];
      },
    /**
     * @name getAppKeyList
     * @description 获取appKey
     * @author cjs1992
     * @date 2020-01-03 09:13:02
     */
    async getAppKeyList() {
      const res = await getDictByBzdm({
        bzdm: "XTDM-APP-KEY"
      });
      this.appKeyList = res.data || [];
      try {
        this.appKey = res.data[0].value;
      } catch (error) {
        console.log(error, "没有配置业务系统的标准代码");
      }
      return Promise.resolve();
    },
    /**
     * @name appKeyChangeFunc
     * @description 业务系统切换
     * @author cjs1992
     * @date 2020-01-03 10:42:26
     */
    async appKeyChangeFunc () {
      this.treeData();
    },
    /**
     * @name btnClick
     * @description 按钮
     * @author cjs1992
     * @date 2019-12-02 17:15:51
     */
    btnClick() {
      this.drawer = true;
    },
    /**
     * @name treeData
     * @description 树形结构
     * @author wqy
     * @date 2019-09-05 17:08:55
     */
    async treeData() {
      const res = await this.$store.dispatch("qxgl-menu/treeData", {
        appKey: this.appKey
      });
      this.data_tree = res.data;
      this.currentMenu = res.data[0];
      this.currentNodekey = res.data[0].id;
      this.keysArr.push(res.data[0].id);
      this.$nextTick(() => {
        let tree = this.$refs.tree;
        tree.setCurrentKey(res.data[0].id);
      });
    },
    /**
     * @name nodeClick
     * @description 点击当前菜单
     * @author wqy
     * @date 2019-09-18 17:29:37
     */
    nodeClick(data) {
      this.currentMenu = data;
    },
    /**
     * @name firstMenuBtn
     * @description 点击添加一级菜单
     * @author wqy
     * @date 2019-09-18 17:29:37
     */
    firstMenuBtn() {
      this.showTitle = "添加一级菜单";
      this.form = {
        name: "",
        url: "",
        route: "",
        icon: "",
        order_seq: ""
      };
      this.isSdd = 1;
      this.dialogVisible = true;
    },
    /**
     * @name firstMenu
     * @description 添加一级菜单
     * @author wqy
     * @date 2019-09-19 10:32:00
     */
    async firstMenu() {
      let data = {
        name: this.form.name,
        parentId: -1,
        url: this.form.url,
        route: this.form.route,
        icon: this.form.icon,
        orderSeq: this.form.order_seq,
        appKey: this.appKey
      };
      const res = await this.$store.dispatch("qxgl-menu/add", data);
      this.$message({
        showClose: true,
        message: "添加菜单成功!",
        type: "success"
      });
      this.dialogVisible = false;
      this.treeData();
    },
    /**
     * @name addBtn
     * @description 点击添加菜单
     * @author wqy
     * @date 2019-09-18 17:29:37
     */
    addBtn() {
      this.showTitle = "添加菜单";
      this.form = {
        name: "",
        url: "",
        route: "",
        icon: "",
        order_seq: ""
      };
      this.isSdd = 2;
      this.dialogVisible = true;
    },
    /**
     * @name add
     * @description 添加菜单
     * @author wqy
     * @date 2019-09-18 17:29:37
     */
    async add() {
      let data = {
        name: this.form.name,
        parentId: this.currentMenu.id,
        url: this.form.url,
        route: this.form.route,
        icon: this.form.icon,
        orderSeq: this.form.order_seq,
        appKey: this.appKey
      };
      const res = await this.$store.dispatch("qxgl-menu/add", data);

      this.$message({
        showClose: true,
        message: "添加菜单成功!",
        type: "success"
      });
      this.dialogVisible = false;
      this.refresh(this.currentMenu.id);
    },
    /**
     * @name editBtn
     * @description 点击编辑菜单
     * @author wqy
     * @date 2019-09-18 17:29:37
     */
    editBtn() {
      for (let key in this.currentMenu) {
        this.form[key] = this.currentMenu[key];
      }
      this.showTitle = "编辑菜单";
      this.isSdd = 3;
      this.dialogVisible = true;
    },
    /**
     * @name edit
     * @description 添加菜单
     * @author wqy
     * @date 2019-09-18 17:29:37
     */
    async edit() {
      let parentId = this.currentMenu.parent_id;
      let data = {
        id: this.form.id,
        name: this.form.name,
        parentId: parentId,
        url: this.form.url,
        route: this.form.route,
        icon: this.form.icon,
        orderSeq: this.form.order_seq
      };
      const res = await this.$store.dispatch("qxgl-menu/edit", data);
      this.$message({
        showClose: true,
        message: "编辑菜单成功!",
        type: "success"
      });
      this.dialogVisible = false;
      this.refresh(this.form.id);
    },
    /**
     * @name deleteRole
     * @description 删除菜单
     * @author wqy
     * @date 2019-09-16 15:55:12
     */
    deleteTip() {
      this.$confirm("您确定要删除菜单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteRole();
        })
        .catch(() => {});
    },
    async deleteRole() {
      const res = await this.$store.dispatch("qxgl-menu/disable", {
        id: this.currentMenu.id
      });
      if (res.status == 1000) {
        this.$message({
          message: "删除成功!",
          type: "success"
        });
        this.refresh(this.currentMenu.parent_id);
      }
    },
    /**
     * @name refresh
     * @description 更新当前状态
     * @author wqy
     * @date 2019-09-19 10:34:38
     */
    async refresh(id) {
      const res = await this.$store.dispatch("qxgl-menu/treeData", {
        appKey: this.appKey
      });
      this.data_tree = res.data;
      this.currentNodekey = id;
      this.keysArr.push(id);
      this.$nextTick(() => {
        let tree = this.$refs.tree;
        tree.setCurrentKey(id);
        this.$nextTick(() => {
          this.currentMenu = tree.getCurrentNode();
        });
      });
    }
  }
};
</script>
<style  scoped>
h5,
p,
ul,
img {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  *zoom: 1;
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}

li {
  list-style-type: none;
}
.treeBox {
  width: 34%;
  min-width: 280px;
  max-width: 300px;
  padding: 30px 15px;
  border: 1px solid #e6e6e6;
  height: 770px;
  overflow: hidden;
  float: left;
}
.contentRight {
  padding-right: 30px;
  margin-left: 320px;
}
.menu .content .title {
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}
.content {
  width: 60%;
  margin: 0 auto;
}
.menu .content ul li {
  padding-left: 30px;
  line-height: 34px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.menu .content ul li span {
  display: inline-block;
  padding-right: 15px;
  font-size: 16px;
}
.groupBtn {
  text-align: left;
  margin-bottom: 15px;
  padding-top: 30px;
}
.groupBtn .el-button + .el-button {
  margin-left: 0;
}
</style>
